<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { FormSchema } from '@/types/form'
import { OtherData } from "@/api/config/types";

const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<OtherData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})

const rules = reactive({
  domain: [required()],
  defaultGroup: [required()],
  disabledStatus: [required()]
})

const { register, methods, elFormRef } = useForm({
  schema: props.formSchema
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
  <div>
    <div class="el-message el-message--warning warning-style">
      <Icon icon="ep:warning-filled" class="el-icon el-message__icon el-message-icon--warning" />
      <p class="el-message__content box-card">

        规则：<br />
        密文端仓库最大数量 * 密文端单仓库最大容量 &lt; 密文端最大容量<br />
        密文端仓库最大数量 * 密文端单仓库最大文件树 &lt; 密文端最大文件数量<br />
        X*Y要小于A，X*Z要小于B </p>
    </div>
    <Form :rules="rules" @register="register" style="width: 50%;">
      <template #ssdevice_ssvs_count-prepend>
        X
      </template>
      <template #ssdevice_max_space_one_ssvs-prepend>
        Y
      </template>
      <template #ssdevice_max_file_count_one_ssvs-prepend>
        Z
      </template>
      <template #ssdevice_storage_total_space-prepend>
        A
      </template>
      <template #ssdevice_storage_total_file_count-prepend>
        B
      </template>
      <template #ssdevice_ssvs_count-append>
        个
      </template>
      <template #ssdevice_max_space_one_ssvs-append>
        GB
      </template>
      <template #ssdevice_max_file_count_one_ssvs-append>
        个
      </template>
      <template #ssdevice_storage_total_space-append>
        GB
      </template>
      <template #ssdevice_storage_total_file_count-append>
        个
      </template>
    </Form>
  </div>
</template>
<style lang="less" scoped>
.box-card {
  color: #5E5D72;
}

.warning-style {
  width: 100% !important;
  max-width: none !important;
  position: unset !important;
  transform: none !important;
  border-radius: 6px;
  margin-bottom: 12px;
}
</style>